<template>
	<div class="customer-page">
		<div class="top">
			<Row :gutter="10" justify="center" >
				<Col span="4">
					<Select placeholder="请选择患者类型" v-model="customerType">
						<Option v-for="item in diseaseTypeList" :value="item.id" :key="item.value">{{ item.itemValue }}</Option>
					</Select>
				</Col>
				<Col span="4">
					<Input v-model="keyWord" placeholder="输入会员卡号/姓名/手机号码" />
				</Col>
                <Col span="16">
                    <div style="display:flex;align-items:center;">
                        <span class="mr10 ml10">建档日期: </span>
                        <DatePicker @on-change="daterangeChange" :value="daterange" type="datetimerange" placement="top-start" placeholder="请选择建档时间范围"></DatePicker>
                        <Button class="ml20" type="success" @click="search">搜索</Button>
                        <Button class="ml20" type="primary" ghost @click="reset">清空</Button>
                        <Checkbox class="check ml20">仅显示会员</Checkbox>
                    </div>
				</Col>
			</Row>
            <Row class="mt10" :gutter="10" justify="center">
				<Col span="4" type="flex" align="left">
					<Button icon="md-add" type="primary" @click="$router.push('/customer/add')">建档</Button>
				</Col>
                <Col span="20" type="flex" align="right">
                    <div>
                        <Dropdown stop-propagation trigger="click">
                            <Icon type="ios-list" :size="33" />
                            <DropdownMenu slot="list">
                                <CheckboxGroup :value="tableColumnsMenu" @on-change="tableColumnsMenuChange">
                                    <div class="menu-item" v-for="(item,i) in tableColumns" :key="i"><Checkbox :label="item">{{item.title}}</Checkbox></div>
                                </CheckboxGroup>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
				</Col>
			</Row>
		</div>
        <Drawer :mask-closable="false" title="患者详情" v-model="showDrawer" :width="720">
			<Tabs :value="activeKey">
                <Tab-pane label="会员券" name="key1" key="key1">
                    <Vip :cur="cur" />
                </Tab-pane>
                <Tab-pane label="设备" name="key2" key="key2">
                    <Device :cur="cur" />
                </Tab-pane>
                <Tab-pane label="体检报告" name="key3" key="key3">
                    <Check :cur="cur" />
                </Tab-pane>
                <Tab-pane label="监测数据" name="key4" key="key4">
                    <Data :cur="cur" />
                </Tab-pane>
                <Tab-pane label="家庭成员" name="key5" key="key5">
                    <Family :cur="cur" />
                </Tab-pane>
            </Tabs>
		</Drawer>

        <!-- addTime -->
		<Table :loading="loading" :columns="tableColumnsMenu" :data="items">
            <template slot-scope="{row}" slot="customerFileNumber">
                <span>{{row.customerFileNumber}}</span>
            </template>

            <template slot-scope="{row}" slot="customerName">
                <span>{{row.customerName}}</span>
            </template>

            <template slot-scope="{ row }" slot="sex">
                <span v-if="Number(row.sex)===1">男</span>
                <span v-else-if="Number(row.sex)===2">女</span>
                <span v-else>-</span>
            </template>

            <template slot-scope="{row}" slot="birthday">
                <span>{{row.birthday |AGE}}</span>
            </template>

            <template slot-scope="{row}" slot="customerType">
                <span>{{getDiseaseType(row.customerType)}}</span>
            </template>

            <template slot-scope="{row}" slot="classes">
                <span>{{row.classes}}</span>
            </template>

            <template slot-scope="{row}" slot="vipno">
                <span>{{row.vipno}}</span>
            </template>

            <template slot-scope="{row}" slot="tags">
                <span>{{row.tags}}</span>
            </template>

            <template slot-scope="{row}" slot="mobile">
                <span>{{row.mobile}}</span>
            </template>

            <template slot-scope="{row}" slot="username">
                <span>{{row.username}}</span>
            </template>

            <template slot-scope="{ row }" slot="addTime">
                <span>{{row.addTime | YMD}}</span>
			</template>
            
			<template slot-scope="{row}" slot="action">
                <router-link class="mr10" :to="{path:'/customer/add',query:{id:row.id,update:1}}">修改资料</router-link>
                <!-- <a class="mr10" href="javascript:;">会员券</a> -->
                <a class="mr10" href="javascript:;" @click="drawerAction('key1',row)">设备</a>
                <router-link class="mr10" :to="{path:'/customer/detail',query:{id:row.id}}">健康档案</router-link>
                <a class="mr10" href="javascript:;" @click="drawerAction('key3',row)">体检报告</a>
                <a class="mr10" href="javascript:;" @click="drawerAction('key4',row)">监测数据</a>
                <a class="mr10" href="javascript:;" @click="drawerAction('key5',row)">家庭成员</a>
			</template>
		</Table>
        <Row class="pagination">
            <Col align="right">
                <Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
            </Col>
        </Row>
	</div>

    

</template>
<script>
import { customerAdd, customerPageQueryList, customerPageQueryInterventionList, customerUpdateInfo, customerPageQueryFollowList, customerGet, customerUpdateHistory, customerUpdateHabit, customerUpdateFamily } from '@api/customer.js'
import { dicPageQueryDicTypeList , dicGetDicItem, dicGetItemByCode} from '@api/dic.js'
import { tagPageQueryList } from '@api/tag.js'
import { mapState } from '@lib/x_.js'
import Vip from './sub/vip.vue'
import Device from './sub/device.vue'
import Family from './sub/family.vue'
import Data from './sub/data.vue'
import Check from './sub/check.vue'
export default {
    components: {
        Vip,
        Device,
        Family,
        Data,
        Check,
    },
	data() {
		return {
            cur: {id:''},
            activeKey: 'key1',
            showDrawer: false,
            tableColumnsMenu:[],
			tableColumns: [
				{
					title: '档案编号',
					align: 'left',
					slot: 'customerFileNumber',
                    width: 150,
                    idx:1,
				},
				{
					title: '姓名',
					align: 'left',
					slot: 'customerName',
                    idx:2,
					width: 90
                },
              
				{
					title: '性别',
					align: 'left',
                    idx:3,
					slot: 'sex',
					width: 90
				},
				{
					title: '年龄',
					align: 'left',
                    idx:4,
					slot: 'birthday',
					width: 100
				},
				{
					title: '患者类型',
					slot: 'customerType',
                    idx:5,
					width: 200
				},
				{
					title: '会员等级',
					align: 'left',
					key: 'classes',
                    idx:6,
					width: 100
				},
				{
					title: '会员卡号',
					align: 'left',
                    idx:7,
					slot: 'vipno',
					width: 100
                },
				{
					title: '患者标签',
					slot: 'tags',
                    idx:8,
					width: 250
				},
				{
					title: '手机号码',
					align: 'left',
					key: 'mobile',
                    idx:9,
					width: 120
				},
				{
					title: '服务药师',
					align: 'left',
					slot: 'username',
                    idx:10,
					width: 130
				},
				{
					title: '建档时间',
					slot: 'addTime',
					align: 'left',
                    idx:11,
					width: 170
				},
				{
					title: '操作',
					slot: 'action',
					align: 'left',
					width: 500,
                    idx:12,
					align: 'left',
                },
                {
					title: ' ',
					key: '',
					align: '',
				}
            ],
            
            // search
            customerType: '',
            keyWord: '',
            tagList: [],
            daterange: ['',''],
            items:[],
			page: 1,
			pageSize: 10,
            totalNum: 0,
            loading: false,

		}
	},
	mounted() {
        this.customerPageQueryList()
        this.dicPageQueryDicTypeList()
        this.tableColumnsMenu = this.tableColumns;
    },
    computed: {
        ...mapState(['diseaseTypeList','familyList','diseaseHistoryList','familyHistoryList','nowTreatmentList','tagList','userList']),
    },
	methods: {
        daterangeChange(t1,t2){
            this.daterange = t1;
        },
        tableColumnsMenuChange(o){
            o = o.sort((a,b) => a.idx - b.idx)
            this.tableColumnsMenu = o
        },
        drawerAction(key,row){
            if (key) {
                this.activeKey = key
            } else {
                this.activeKey = "key1"
            }
            if (row) {
                this.cur = row;
            }
            this.showDrawer = true;
        },
        getDiseaseType(itemKey){
            const idx = this.diseaseTypeList.findIndex((item,i) => item.itemKey === itemKey)
            if (idx > -1) {
                return this.diseaseTypeList[idx]['itemValue']
            } else {
                return ''
            }
        },
        search() {
            this.page = 1;
            this.pageSize = 10;
            this.customerPageQueryList()
        },
        reset() {
            this.page = 1;
            this.pageSize = 10;
            this.customerType= '';
            this.keyWord='';
            this.daterange= [];
        },
        dicPageQueryDicTypeList(){
            dicPageQueryDicTypeList({
                page:1,
				pageSize: 100,
            }).then(res => {
                console.log('dicPageQueryDicTypeList>', res)
            })
        },
        pageChange(page) {
            if (this.loading) {
                return;
            }
			this.page = page
			this.customerPageQueryList()
        },
        customerPageQueryList() {
            this.loading || (this.loading = true)
            const { customerType,keyWord,daterange, page, pageSize, loading } = this;
            const [beginTime, endTime] = daterange;
			customerPageQueryList({beginTime,endTime, customerType,keyWord,page,pageSize })
				.then(res => {
					this.loading = false
					if (res.code === '0') {
                        const { currentPage, isMore, items, pageSize, totalNum, totalPage } = res.data;
                        this.items = items;
                        this.page = currentPage;
                        this.totalNum = totalNum;
					} else {
                        this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
					    })
                    }
				})
				.catch(err => {
					this.loading = false
				})
		},
		show(index) {
			this.$Modal.info({
				title: 'User Info',
				content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
			})
		},
		remove(index) {
			this.data6.splice(index, 1)
		},
    },
}
</script>
<style lang="scss">
/* .ivu-table-wrapper{
    max-width: 100%;
    overflow-y: scroll !important;
} */
.top {
	margin-bottom: 20px;
}
.page {
	margin-top: 20px;
}
.customer-page{
    background-color: #fff;
    .menu-item{
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
    }
}
</style>
